<template>
  <!-- 播放的列表 -->
  <div class="play-music-list"
       v-if="musicList.length!=0">
    <!-- 音乐列表 -->
    <scroll class="play-music-list-scroll"
            ref="scroll"
            :scrollbar="{fade:false}">
      <!-- 顶部 -->
      <div class="top">
        <div class="title">播放列表</div>
        <div class="exist"
             @click="exist()">
          <img src="~assets/img/content/x.svg"
               alt />
        </div>
        <!-- 清除浮动 -->
        <div class="clear"></div>
      </div>
      <div class="list">
        <music-item :musiclist="musicList" />
      </div>
    </scroll>
  </div>
</template>

<script>
import Scroll from 'components/common/scroll/Scroll'
import MusicItem from 'views/musicListDetail/childComps/MusicItem'
export default {
  name: 'PlayMusicList',
  components: { Scroll, MusicItem },
  props: {
    musicList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  updated () {
    this.$refs.scroll.refresh()
  },
  methods: {
    exist () {
      this.$parent.isMusicList = false
    }
  }

}
</script>

<style scoped>
.play-music-list {
  width: 650px;
  height: 520px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 1px #fff;
}
.play-music-list-scroll {
  height: 520px;
}
.top {
  width: 100%;
  position: relative;
  background: #00aa85;
}
.top .title {
  width: calc(100%-30px);
  float: left;
  text-align: center;
}
.top .exist {
  cursor: pointer;
  width: 20px;
  height: 20px;
  margin: 2px 10px 0px 0px;
  float: right;
}
.top .exist img {
  width: 100%;
}
.clear {
  clear: both;
}
</style>
